---
title: Tabs | gluestack-ui | Installation, Usage, and API

description: The Tabs component organizes content into multiple sections with tab-based navigation for easy switching between different views.

pageTitle: Tabs

pageDescription: The Tabs component organizes content into multiple sections with tab-based navigation for easy switching between different views.

showHeader: true

tag: api-draft
---

import { Meta } from '@storybook/addon-docs';
import { Table, TableContainer, InlineCode } from '@gluestack/design-system';
import Wrapper from '../../core-components/themed/Wrapper';

<Meta title="common/components/Tabs" />

## Anatomy

The structure provided below can help you identify and understand a Tabs component's various parts.

```jsx
export default () => (
  <Tabs>
    <TabsList>
      <TabsTrigger>
        <TabsText />
      </TabsTrigger>
    </TabsList>
    <TabsContents>
      <TabsContent />
    </TabsContents>
  </Tabs>
);
```

## API Reference

The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.

#### Tabs

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultValue</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>string</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>value</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>string</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The controlled value of the tab to activate. Should be used in conjunction with onValueChange.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onValueChange</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>function</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Event handler called when the value changes`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>orientation</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>"horizontal" | "vertical"</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>"horizontal"</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The orientation of the tabs.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### TabsList

Contains the triggers that are aligned along the edge of the active content.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>loop</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>true</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`When true, keyboard navigation will loop from last tab to first, and vice versa.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### TabsTrigger

The button that activates its associated content. Must be wrapped with `TabsList`.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>value</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>string</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`A unique value that associates the trigger with a content.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`When true, prevents the user from interacting with the tab.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### TabsText

Must be wrapped with `TabsTrigger`. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### TabsContents

Wraps all the `TabsContent` components. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### TabsContent

Contains the content associated with each trigger. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>value</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>string</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`A unique value that associates the content with a trigger.`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

## Accessibility

Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

We have outlined the various features that ensure the Tabs component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

- The element that serves as the container for the set of tabs has role `tablist`.
- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.
- Each element that contains the content panel for a tab has role `tabpanel`.
- If the tab list has a visible label, the element with role `tablist` has `aria-labelledby` set to a value that refers to the labelling element. Otherwise, the `tablist` element has a label provided by `aria-label`.
- Each element with role `tab` has the property `aria-controls` referring to its associated `tabpanel` element.
- The active tab element has the state `aria-selected` set to true and all other tab elements have it set to `false`.
- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
- If the `tablist` element is vertically oriented, it has the property `aria-orientation` set to `vertical`. The default value of aria-orientation for a tablist element is horizontal.

### Keyboard Interactions

- `Space or Enter` - Activates the tab if it was not activated automatically on focus.
- `Tab` - When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
- `ArrowDown` - Moves focus to the next trigger depending on `orientation` and activates its associated content.
- `ArrowUp` - Moves focus to the previous trigger depending on `orientation` and activates its associated content.
- `ArrowRight` - Moves focus to the next trigger depending on `orientation` and activates its associated content.
- `ArrowLeft` - Moves focus to the previous trigger depending on `orientation` and activates its associated content.
- `Home` - Moves focus to the first trigger and activates its associated content.
- `End` - Moves focus to the last trigger and activates its associated content.

## Unstyled

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

### Customizing the Tabs

We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.

You can read more on how to animate components [here](/ui/docs/advanced/animations).

### Usage

Default styling of all these components can be found in the `components/core/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Tabs) of the styled `Tabs` components.

```jsx
// import the styled components

import {
  Root,
  List,
  Trigger,
  Content,
  Contents,
  Text,
} from 'components/core/tabs/styled-components';

// import the createTabs function
import { createTabs } from '@gluestack-ui/tabs';

// Understanding the API
export const Tabs = createTabs({
  Root,
  List,
  Trigger,
  Content,
  Contents,
  Text,
});

// Using the tabs component
export default () => (
  <Tabs>
    <TabsList>
      <TabsTrigger value="tab1">
        <TabsText>Tab 1</TabsText>
      </TabsTrigger>
      <TabsTrigger value="tab2">
        <TabsText>Tab 2</TabsText>
      </TabsTrigger>
      <TabsTrigger value="tab3">
        <TabsText>Tab 2</TabsText>
      </TabsTrigger>
    </TabsList>
    <TabsContents>
      <TabsContent value="tab1">
        <Text>Content 1</Text>
      </TabsContent>
      <TabsContent value="tab2">
        <Text>Content 2</Text>
      </TabsContent>
      <TabsContent value="tab3">
        <Text>Content 3</Text>
      </TabsContent>
    </TabsContents>
  </Tabs>
);
```
